olikit | DOCUMENTATION

# Getting Started

Thank you for purchasing our Template , You are entitled to get free lifetime updates to this product and support from the team. Thanks!

| How To Start :

You will need the following tools to customize olikit template.

1. A good code editor of your choice like (atome, vscode, brackets ...)
2. A supported web browser
3. A Sass preprocessor installed
4. Intermediate " html " knowledge
5. Intermediate " scss " knowledge
6. Basic " javascript " knowledge

# Filles Structure

This section is about the olikit File structure. You will learn where to find the files you need to start working and how to order them. olikit has many files and it's easy to get lost. Let's dive into the folder structure.

## | Global template structure :

olikit Docs
olikit template
| -- assets
| --- |---- css
| --- |---- fonts
| --- |---- images
| --- |---- js
| -- pages
| --- |---- Home_1.html
| --- |---- Home_2.html
| --- |---- Home_3.html
| --- |---- Home_4.html
| --- |---- Home_5.html
| --- |---- Home_1_grad.html
| --- |---- Home_2_grad.html
| --- |---- Home_3_grad.html
| --- |---- Home_4_grad.html
| --- |---- Home_5_grad.html
| --- |---- About.html
| --- |---- Contact.html
| --- |---- 404.html
| --- |---- Help.html
| --- |---- blog.html
| --- |---- blog list.html
| --- |---- article.html
| --- |---- services.html
| --- |---- plans.html
| --- index.html

## | SCSS files :

olikit relies on the powerful Sass features, letting you handle complex styles in a breeze.

### File structure

olikit relies on a heavy but modular scss structures. You only import in your Style file the partials that you need. This how scss files are organized. Of course, you will never find them all at one in one place. We simply display them here in a friendly manner so you can identify each one of them.

scss
| -- Bases
| --- |---- _bases.scss
| --- _colors
| -- elements
| --- |---- _Buttons.scss
| --- |---- _inputs.scss
| -- Helpers
| --- |---- _classes.scss
| --- |---- _mixins.scss
| --- |---- _variable.scsss
| -- Layouts
| --- |---- _navbars.scss
| --- |---- _headers.scss
| --- |---- _sections.scss
| --- |---- _footers.scss
| --- |---- _others.scss
| --- Style.scss

### Style file

# customization your theme

olikit is built in a css modular approach. We've made it easy for you to customize theme colors.

## Change Page color:

you can easly change your pages main colors you need just go to scss/1-helpers/colors.scss and change your primary, and layouts colors

## Change Logo:

The logo image can be found inside header container, so just upload you site logo image inside olikit > assets > images > Logos > olikit -logo.svg

## Change Images:

olikit template downloaded package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like ./assets/images/Image_URL.png

## Changing Fonts:

In order to use google fonts, you need to visit Google Fonts Library and follow the instructions on how to get a new font. After you have decided on the styles of the font that you want to load, or download it in ./assets/fonts/
after you need to add the name you font in ./assets/scss/bases/bases.scss like this :

Go to ./assets/scss/1-helpers/_variables.scss and edit this file with you new font like that:

# Css Reference

This is the css reference section. You will find here the most important element classes and their related modifiers.

## Generale Helpers:

### text helpers

Class name	Effects

text-grad	Sets the target text to gradient color
text-deco	Sets the target text decoration to underline
text-center	Sets the target text align to center
text-left	Sets the target text align to left
text-right	Sets the target text align to right
font-w-400	Sets the target font weight to 400
font-w-500	Sets the target font weight to 500
font-w-600	Sets the target text font weight to 600
font-*1-10	Sets the target font size to the number value

### Margin helpers

Class name	Effects

m-*1-10	Sets the target element margin to the number value
m-helf	Sets the target element margin to 0.5rem
ml-*1-10	Sets the target element margin left to the number value
ml-helf	Sets the target element margin left to 0.5rem
mr-*1-10	Sets the target element margin right to the number value
mr-helf	Sets the target element margin right to 0.5rem
mt-*1-10	Sets the target element margin top to the number value
mt-helf	Sets the target element margin top to 0.5rem
mb-*1-10	Sets the target element margin bottom to the number value
mb-helf	Sets the target element margin bottom to 0.5rem

### Padding helpers

Class name	Effects

p-*1-10	Sets the target element padding to the number value
p-helf	Sets the target element padding to 0.5rem
pl-*1-10	Sets the target element padding left to the number value
pl-helf	Sets the target element padding left to 0.5rem
pr-*1-10	Sets the target element padding right to the number value
pr-helf	Sets the target element padding right to 0.5rem
pt-*1-10	Sets the target element padding top to the number value
pt-helf	Sets the target element padding top to 0.5rem
pb-*1-10	Sets the target element padding bottom to the number value
pb-helf	Sets the target element padding bottom to 0.5rem

### Text color helpers

Class name	Effects

color-primary	Sets the target text color to $primary
color-secondary	Sets the target text color to $secondary
color-white	Sets the target text color to $white
color-dark	Sets the target text color to $dark

### Flexbox helpers

Class name	Modifier	Effects

.flex	.start	Sets the target element flex to start
.flex	.center	Sets the target element flex to center
.flex	.end	Sets the target element flex to end
.flex	.vcenter	Sets the target element align flex to center

## elements Helpers:

### Buttons helpers

Class name	Modifier	Effects

btn	btn-lg	Large button size
btn	btn-sm	Small button size
btn	btn-primary	Makes a button background color $primary
btn	btn-dark	Makes a button background color $dark
btn	btn-white	Makes a button background color $white
btn	btn-danger	Makes a button background color $danger
btn	btn-success	Makes a button background color $success
btn	btn-warning	Makes a button background color $warning
btn	btn-grad	Makes a button background gradient $bg-gradient
btn	btn-sh	Adds a box shadow to a button
btn	btn-outline	Adds a box shadow to a button

### Inputs helpers

Class name	Modifier	Effects

input	input-primary	sets the target input element color to $primary
input	input-round	makes the border radius to the target input element
input	input-outline-bottom	makes the border radius to the target input element

# Customer support

Please remember you have purchased a very affordable theme and you did not pay for a full-time web design agency. We will help with your issues, but these requests will be put on a relevant priority, regarding their nature. Support is provided for your comfort and for a best possible experience, so please be patient, polite and respectful, as we are towards you.

## Support includes:

• Responding to questions or problems regarding the item and its features
• Fixing bugs and reported issues
• Providing updates

## Support doesn't include :

• Customization and installation services
• Support for third party software and plugins

## Before Support:

• Make sure your question is a valid Theme Issue and not a customization request
• Make sure you have read through the documentation and any ressources before asking support on how to accomplish a task
• If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
• Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
• Make sure to state the name of the theme you are having issues with when requesting support.